<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

        <title>T-campatible</title>
        <meta name="description" content="test-align.html">
        <meta name="author" content="jurnlee">
        	
        <style type="text/css">
            *{
                margin:0;
                padding:0;
            }
            /*
             *html #wraper{} IE6
             *+html #wraper{} IE7
             _height: IE6
             *height:IE7
             IE67无法识别display属性,只识别本身是inline的元素
             */
            .wraper{
            	height: 100%;
            	width: 80%;  /*注意与margin结合的效果，百分比与边距累加，超过屏幕尺寸会出现滚动条*/
            	margin: 10px auto;
            	padding: 5px;
            	border: 1px solid #4C4C4C;
            	box-sizing: border-box;
            }
            #left, #right, #right2{
            	display: inline-block;
            	padding: 10px;
            	width: 200px;
            	height: 150px;
            	/*border: 1px solid #ccc;*/
            	outline: solid #ccc thin;  /*不占用宽度适合调试，IE67不支持*/
            }
            #left{
				/*margin-right: 10px;*/
				background-color: #CCE6FF;
            }
            #right{
				background-color: #64B9D2;
            }
            #right2{
            	background-color: #CAD2D3;
            }
            
        </style>
        <script type="text/javascript">
            
        </script>
    </head>

    <body>
            <div class="wraper">
            	<div id="left">
            		<span id="">
            			left-content
            		</span> 
            	</div>
            	<div id="right">
            		<span id="">
            			right-content
            		</span> 
            	</div>
            	<div id="right2">
            		<span id="">
            			right2-content
            		</span> 
            	</div>
            	
            </div>
    </body>
</html>
